import React from 'react';
import hashHistory from '@hashHistory';
import { Button } from 'antd';
import { autorun } from 'mobx';
import home2Store from './home2Store';
import styles from './index.module.less';
import AnyCom from './AnyCom';

class Home2 extends React.Component {
  state = {
    storeValue: home2Store.value,
  };

  disposer: any = null;

  componentDidMount() {
    this.disposer = autorun(() => {
      const { value } = home2Store;
      this.setState({ storeValue: value });
      console.log(value);
    });
  }

  componentWillUnmount() {
    // 组件销毁时，必须清除 autorun 监听
    if (this.disposer) {
      this.disposer();
    }
  }

  handleClick = () => {
    home2Store.setValue(this.state.storeValue + 1);
  };

  render() {
    const { storeValue } = this.state;
    return (
      <div>
        <div>Class写法</div>
        <div>我是父组件全局状态： {storeValue}</div>
        <Button onClick={this.handleClick}>设置store</Button>
        <AnyCom />

        <Button
          type="link"
          onClick={() => {
            hashHistory.push('/');
          }}
        >
          去看看 Hooks 组件写法
        </Button>
      </div>
    );
  }
}

export default Home2;
